import React from 'react';
import { AsyncTree } from '../../../../functionalComponent';
import { Layout } from '../../../../util';
import { getExpressionFuncTree } from '../../service';

export default function ({
  editor,
  setCurrentFunc
}: {
  editor: React.RefObject<{
    insertEdit: (a: any) => any;
  }>;
  setCurrentFunc: (a) => void;
}) {
  const onSelect = async (_, { node }) => {
    const { nodeType, funcFullName } = node;
    if (nodeType == 'func') {
      const str = funcFullName.match(/(.*)(?=\(\))/);
      editor.current?.insertEdit?.({ text: str[0] });
      setCurrentFunc(node);
    }
  };
  return (
    <Layout.Flex style={{ flex: 1, height: '100%' }}>
      <AsyncTree
        virtual={false}
        request={() => getExpressionFuncTree()}
        onSelect={onSelect}
        icon={false}
        convertNode={(node: any) => {
          return {
            ...node,
            key: node.key,
            title: node.title,
            isLeaf: node.leaf
          };
        }}
      />
    </Layout.Flex>
  );
}
